import echarts from 'echarts';

interface IConfig {
  dataX?: Array<string>,
  nameX?: string,
  nameY?: string,
  dataY?: Array<number>,
  ref: any,
  title?: string,
  color?: Array<any>,
  legendData?: Array<any>,
  seriesData?: Array<any>,
  xAxisData?: Array<any>
}

export function SingleAlarmLine(config: IConfig) {
  if(config.ref) {
    let myChart = echarts.init(config.ref);
    let colors = config.color;
    let option = {
      color: colors,
      title: {
        text: config.title,
        textStyle: {
          fontSize: 20,
          color: '#333',
          fontWeight: 400
        },
        left: 'center'
      },
      tooltip: {
        trigger: 'none',
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {
        data: config.legendData,
        top: 'bottom'
      },
      grid: {
        top: 70,
        bottom: 50
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              color: colors[1]
            }
          },
          axisPointer: {
            label: {
              formatter: function (params) {
                return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
              }
            }
          },
          data: config.xAxisData
        },
        {
          type: 'category',
          axisTick: {
            alignWithLabel: true
          },
          axisPointer: {
            label: {
              formatter: function (params) {
                return params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
              }
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: config.seriesData
    };
    myChart.setOption(option)
  }
}

